// import logo from './logo.svg';
import "./App.css";
import React from "react"; // react核心库
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; // 路由组件
// import { Switch } from "react-router-dom"; // 动态匹配路由
import BasicLayout from "./components/layout/BasicLayout";
import Home from "./components/pages/home/Home";
import About from "./components/pages/about/About";
import Contact from "./components/pages/contact/Contact";
function App() {
  // const title = "react advance gradually";
  // const items = [
  //   { id: 1, name: "Item 1" },
  //   { id: 2, name: "Item 2" },
  //   { id: 3, name: "Item 3" },
  // ];
  return (
    <Router>
      {/* <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav> */}
      <BasicLayout>
        <Routes>
          <Route path="/" element={<Home></Home>} />
          <Route path="/about" element={<About></About>} />
          <Route path="/contact" element={<Contact></Contact>} />
          {/* <Route path="*" component={NotFound} /> */}
        </Routes>
      </BasicLayout>
    </Router>
    // <div>
    //   <h1>{title}</h1>
    //   <ul>
    //     {items.map((item) => (
    //       <li key={item.id}>{item.name}</li>
    //     ))}
    //   </ul>
    // </div>
  );
}

export default App;
